<template>
  <div class="root">
      <el-container class="container">
        <!--    头部条    -->
        <el-header class="header">
          <div class="left">
            <icon class="icon">图标</icon>
            <div class="text">Arco Pro</div>
          </div>
          <div class="center"></div>
          <div class="right">
            <icon class="icon">图标</icon>
            <div class="text">admin</div>
          </div>
        </el-header>
        <!--    身体区域    -->
        <el-container class="body-container">
          <!--    左侧栏      -->
          <el-aside class="body-left-aside" width="200px">
            <!--     菜单栏     -->
            <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>仪表盘</span>
                </template>
                  <el-menu-item index="1-1">工作台</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="2">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>回收人员管理</span>
                </template>
                <el-menu-item index="2-1">人员列表</el-menu-item>
              </el-sub-menu>


              <el-sub-menu index="3">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>订单管理</span>
                </template>
                <el-menu-item index="3-1">订单列表</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="4">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>平台中心</span>
                </template>
                <el-menu-item index="4-1">修改密码</el-menu-item>
                <el-menu-item index="4-2">联系信息设置</el-menu-item>

              </el-sub-menu>

              <el-sub-menu index="5">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>分类管理</span>
                </template>
                <el-menu-item index="5-1">分类列表</el-menu-item>

              </el-sub-menu>

            </el-menu>

          </el-aside>
          <!--     内容区域     -->
          <el-main class="body-right-main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
  </div>
</template>
<script setup>
  import { Location} from '@element-plus/icons-vue'
  // const handleOpen = (key, keyPath) => {
  //   console.log(key, keyPath)
  // }
  // const handleClose = (key, keyPath) => {
  //   console.log(key, keyPath)
  // }

</script>
<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 97.7vh;
    position: relative;
    background-color: #eff0f2;
    .container {
      width: 100%;
      height: 100%;
      position: relative;
      gap: 10px;
      .header {
        background-color: white;
        display: grid;
        grid-template-columns: 1fr 8fr 1fr;
        justify-content: center;
        align-items: center;
        .left {
          display: grid;
          grid-template-columns: 30% 1fr;
          text-align: left;
        }
        .right {
          display: grid;
          grid-template-columns: 30% 1fr;
          text-align: left;
        }

      }
      .body-container {
        gap: 10px;
        .body-left-aside {
          width: 15%;
          background-color: white;
          overflow: hidden;
        }
        .body-right-main {
          background-color: white;
        }

      }


    }
  }
</style>
